<template>
  <div ref="chart" style="height: 100%;width:100%"></div>
</template>
<script>
import { Chart, registerShape } from '@antv/g2';
export default {
  name: 'RoseChart',
  props: {
    data: { type: Array, required: true },
    color: { type: Array, required: true }
    // unit: { type: String, required: true }
  },
  data() {
    return {
      chart: null,
      geo: null,
      total: 0
    };
  },
  mounted() {
    this.initChart();
    this.drawChart();
  },
  watch: {
    data: {
      handler() {
        this.updateData();
      }
    }
  },
  methods: {
    initChart() {
      const ref = this.$refs.chart;
      this.chart = new Chart({
        container: ref,
        width: ref.clientWidth,
        height: ref.clientHeight
      });
    },
    drawChart() {
      const ratio = window.ratio || 1;
      // 总数
      if (this.data[0] && this.data[0].y !== undefined) {
        this.total = 0;
        this.data.forEach((item) => {
          this.total += item.y;
        });
      }
      registerShape('interval', 'slice-shape', {
        draw(cfg, container) {
          const group = container.addGroup();
          const points = cfg.points;
          let path1 = [];
          path1.push(['M', points[0].x, points[0].y]);
          path1.push(['L', points[1].x, points[1].y]);
          path1.push(['L', points[2].x, points[2].y]);
          path1.push(['L', points[3].x, points[3].y]);
          path1.push('Z');
          path1 = this.parsePath(path1);
          let path2 = [];
          path2.push(['M', points[1].x, points[1].y]);
          path2.push(['L', points[2].x, points[2].y]);
          path2 = this.parsePath(path2);
          group.addShape('path', {
            attrs: {
              fill: cfg.color,
              fillOpacity: 0.5,
              path: path1
            }
          });
          group.addShape('path', {
            attrs: {
              stroke: cfg.color,
              lineWidth: 4 * ratio,
              path: path2
            }
          });
          return group;
        }
      });
      this.chart.data(this.data);
      this.chart.legend(false);
      // x轴
      this.chart.axis('x', {
        label: null,
        grid: null,
        line: {
          style: {
            stroke: '#FFFFFF',
            strokeOpacity: 0
          }
        }
      });
      // y轴
      this.chart.axis('y', {
        line: null,
        label: null,
        grid: {
          line: {
            style: {
              stroke: '#FFFFFF',
              strokeOpacity: 0.1
            }
          },
          alignTick: true
        }
      });
      this.chart.scale('y', {
        // 更改图表大小
        tickCount: 6,
        nice: true
      });
      this.chart.coordinate('polar');
      this.geo = this.chart
        .interval()
        .position('x*y')
        .color('x', this.color)
        .shape('slice-shape');
      this.chart.tooltip({
        showMarkers: false,
        itemTpl: `
          <div class="g2-tooltip-list-item">
            <div class="g2-tooltip-name">{name}</div>：
            <div class="g2-tooltip-percent">{percent}</div>
          </div>
        `,
        customItems: items => {
          const percent = ((Number(items[0].value) / this.total) * 100).toFixed(1) + '%';
          items[0].value += this.unit;
          items[0].percent = percent;
          return items;
        },
        domStyles: {
          'g2-tooltip': {
            borderRadius: '0.25rem',
            backgroundColor: 'rgba(0, 0, 0, 0.5)',
            boxShadow: 'none',
            color: '#D9D9D9',
            fontSize: '0.75rem',
            lineHeight: '.875rem',
            padding: '.3125rem .5rem',
            whiteSpace: 'nowrap'
          },
          'g2-tooltip-title': {
            margin: 0,
            display: 'none'
          },
          'g2-tooltip-list-item': {
            display: 'flex',
            alignItems: 'center',
            margin: '.3125rem 0'
          },
          'g2-tooltip-percent': {
            marginLeft: '0'
          }
        }
      });
      if (!this.data.some(item => item.y !== 0)) {
        this.chart.scale('y', {
          ticks: [0, 1, 2, 3, 4, 5, 6]
        });
      }
      this.chart.render();
    },
    updateData() {
      this.chart.clear();
      this.drawChart();
    }
  }
};
</script>
